<template>
  <div>
    {{selectedButton}}
    <div ref="chartColumn" style="width:558px; height:370px;"></div>
    <!--    <button @click="changeOption">点击改变内容</button>-->
  </div>

</template>

<script>
import { spatialComparison } from "@/api/industry/shulian";
import * as echarts from 'echarts';
export default {
  props: {
    selectedButton: String
  },
  data() {
    return {
      vlan:'',
      chartColumn: null,
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [

          {
            // name: 'Access From',
            type: 'pie',
            radius: ['50%', '70%'],
            data: [

            ],
            // emphasis: {
            //   itemStyle: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //   }
            // },
            label: {
              show: true, // 显示标签
              position: 'inside', // 标签位置，可以是 'inside'（圆环内部）或 'outside'（圆环外部）
              formatter: data => {
                return `${Math.ceil(data.percent)}%`
              },
              // formatter: '{d}%', // 标签内容格式化，{b} 表示数据项名称，{d} 表示数据项所占比例的百分比
              textStyle: {
                fontSize: 12, // 标签字体大小
                fontWeight: 'bold' // 标签字体粗细
              }
            }
          }
        ]
      }
    }
  },
  methods: {
    //统计产业物理空间信息
    updateChartWithData() {
      spatialComparison().then(res => {
          const newData = [
            { value: `${res.data.spaceType.premises.count}`, name: '楼宇办公' },
            { value: `${res.data.spaceType.workshop.count}`, name: '厂房' },
            { value: `${res.data.spaceType.land.count}`, name: '土地' },
            { value: `${res.data.spaceType.warehouse.count}`, name: '仓库' },
            { value: `${res.data.spaceType.park.count}`, name: '园区' },
            { value: `${res.data.spaceType.warehouse.count}`, name: '公寓' },
            { value: `${res.data.spaceType.auction.count}`, name: '拍卖' },
            { value: `${res.data.spaceType.building.count}`, name: '楼宇商用' }
          ];
        // if (value === '周') {
        //   const newData = [
        //     { value: `${res.data.spaceType.premises.week}`, name: '楼宇办公' },
        //     { value: `${res.data.spaceType.workshop.week}`, name: '厂房' },
        //     { value: `${res.data.spaceType.land.week}`, name: '土地' },
        //     { value: `${res.data.spaceType.warehouse.week}`, name: '仓库' },
        //     { value: `${res.data.spaceType.park.week}`, name: '园区' },
        //     { value: `${res.data.spaceType.warehouse.week}`, name: '公寓' },
        //     { value: `${res.data.spaceType.auction.week}`, name: '拍卖' },
        //     { value: `${res.data.spaceType.building.week}`, name: '楼宇商用' }
        //   ];
        //   console.log(res,"统计产业物理空间信息")
        //   this.option.series[0].data = newData;
        //   this.chartColumn.setOption(this.option);
        // } else if (value === '月') {
        //   const newData = [
        //     { value: `${res.data.spaceType.premises.month}`, name: '楼宇办公' },
        //     { value: `${res.data.spaceType.workshop.month}`, name: '厂房' },
        //     { value: `${res.data.spaceType.land.month}`, name: '土地' },
        //     { value: `${res.data.spaceType.warehouse.month}`, name: '仓库' },
        //     { value: `${res.data.spaceType.park.month}`, name: '园区' },
        //     { value: `${res.data.spaceType.warehouse.month}`, name: '公寓' },
        //     { value: `${res.data.spaceType.auction.month}`, name: '拍卖' },
        //     { value: `${res.data.spaceType.building.month}`, name: '楼宇商用' }
        //   ];
        //   console.log(res,"统计产业物理空间信息")
        //   this.option.series[0].data = newData;
        //   this.chartColumn.setOption(this.option);
        // } else if (value === '全') {
        //   const newData = [
        //     { value: `${res.data.spaceType.premises.sum}`, name: '楼宇办公' },
        //     { value: `${res.data.spaceType.workshop.sum}`, name: '厂房' },
        //     { value: `${res.data.spaceType.land.sum}`, name: '土地' },
        //     { value: `${res.data.spaceType.warehouse.sum}`, name: '仓库' },
        //     { value: `${res.data.spaceType.park.sum}`, name: '园区' },
        //     { value: `${res.data.spaceType.warehouse.sum}`, name: '公寓' },
        //     { value: `${res.data.spaceType.auction.sum}`, name: '拍卖' },
        //     { value: `${res.data.spaceType.building.sum}`, name: '楼宇商用' }
        //   ];
        //   console.log(res,"统计产业物理空间信息")
        //   this.option.series[0].data = newData;
        //   this.chartColumn.setOption(this.option);
        // }
        //     console.log(res,"统计产业物理空间信息")
            this.option.series[0].data = newData;
            this.chartColumn.setOption(this.option);
      });
    },
    initChart() {
      this.chartColumn = echarts.init(this.$refs.chartColumn);
      // Uncomment the following line if you want to show a loading animation during the API request
      // this.chartColumn.showLoading();

      // Fetch API data and update the chart
      this.updateChartWithData();
    }
  },
  mounted() {
    this.initChart();
    this.updateChartWithData()
  }
}
</script>

<style scoped>

</style>
